<template>
  <el-dialog :title="'资源'" :visible.sync="visible"
             :close-on-click-modal="false" @close="hideDo">

    <el-form ref="form" :model="row" label-width="120px" align="left">

      <el-form-item label="名称"
                    prop="name"
                    :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
        <el-input v-model="row.name" placeholder="请输入"/>
      </el-form-item>

      <el-form-item label="分类ID">
        <el-input v-model="row.typeId" placeholder="请输入"/>
      </el-form-item>

      <el-form-item label="分类名称">
        <el-input v-model="row.typeName" placeholder="请输入"/>
      </el-form-item>

      <el-form-item label="类型">
        <el-select v-model="row.mold">
          <el-option
            :label="'教材'"
            :value="0">
          </el-option>
          <el-option
            :label="'课程标准'"
            :value="1">
          </el-option>
          <el-option
            :label="'课件'"
            :value="2">
          </el-option>
          <el-option
            :label="'案例'"
            :value="3">
          </el-option>
          <el-option
            :label="'习题'"
            :value="4">
          </el-option>
          <el-option
            :label="'微课'"
            :value="5">
          </el-option>
          <el-option
            :label="'动画'"
            :value="6">
          </el-option>
          <el-option
            :label="'其他'"
            :value="7">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="备注">
        <el-input v-model="row.remark" placeholder="请输入"/>
      </el-form-item>

      <el-form-item label="允许下载">
        <el-select v-model="row.canDownload">
          <el-option
            :label="'不允许'"
            :value="0">
          </el-option>
          <el-option
            :label="'允许'"
            :value="1">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="文件">
        <el-upload
          class="avatar-uploader"
          :action="'/file/upload/resource'"
          :show-file-list="false"
          :on-success="handleAvatarSuccess_content"
          :before-upload="beforeAvatarUpload_content">
          <el-tag v-if="row.contentFile">{{row.contentFile}}</el-tag>
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="封面">

        <el-upload
          class="avatar-uploader"
          :action="'/file/upload/image'"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="row.coverFile" :src="'/file/image/' + row.coverFile" width="66" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="学习"
                    prop="studyCount"
                    :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
        <el-input-number v-model="row.studyCount" placeholder="请输入"/>
      </el-form-item>

      <el-form-item label="收藏"
                    prop="collectionCount"
                    :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
        <el-input-number v-model="row.collectionCount" placeholder="请输入"/>
      </el-form-item>

      <el-form-item label="下载"
                    prop="downloadCount"
                    :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
        <el-input-number v-model="row.downloadCount" placeholder="请输入"/>
      </el-form-item>

      <el-form-item label="上传人ID">
        <el-input v-model="row.pushUserId" placeholder="请输入"/>
      </el-form-item>

      <el-form-item label="上传人">
        <el-input v-model="row.pushUser" placeholder="请输入"/>
      </el-form-item>

      <el-form-item label="审核状态">
        <el-select v-model="row.examineStatus">
          <el-option
            :label="'待审核'"
            :value="0">
          </el-option>
          <el-option
            :label="'通过'"
            :value="1">
          </el-option>
          <el-option
            :label="'不通过'"
            :value="2">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="排序"
                    prop="weight"
                    :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
        <el-input-number v-model="row.weight" placeholder="请输入"/>
      </el-form-item>

      <el-form-item label="来源">
        <el-select v-model="row.source">
          <el-option
            :label="'系统'"
            :value="0">
          </el-option>
          <el-option
            :label="'学校'"
            :value="1">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="来源学校ID">
        <el-input v-model="row.schoolId" placeholder="请输入"/>
      </el-form-item>

      <el-form-item label="状态">
        <el-select v-model="row.isEnable">
          <el-option
            :label="'禁用'"
            :value="0">
          </el-option>
          <el-option
            :label="'启用'"
            :value="1">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item>
        <el-button icon="el-icon-edit" type="primary" @click="submitForm">提交</el-button>
        <el-button icon="el-icon-delete" @click="hide()">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

</template>

<script>
  let data = () => {
    return {
      isAdd: false,
      visible: false,
      row: {},
      oldRow: {},
      isChange: false
    }
  }
  export default {
    data: data,
    props: ['search'],
    methods: {
      show: function (row) {
        this.oldRow = row;
        this.row = JSON.parse(JSON.stringify(row));
        this.visible = true;
        this.isChange = false;
      },
      showAdd: function () {
        this.isAdd = true;
        this.visible = true;
        this.oldRow = null;
        this.isChange = false;

        this.row = {
          mold: 0,
          canDownload: 1,
          studyCount: 0,
          collectionCount: 0,
          downloadCount: 0,
          examineStatus: 0,
          weight: 0,
          source: 0,
          isEnable: 1,

        }
      },
      hide: function () {
        this.visible = false;
      },
      hideDo: function () {
        this.isAdd = false;
        if (this.isChange && this.oldRow) {
          for (let item in this.oldRow) {
            let val = this.row[item];
            this.oldRow[item] = val;
          }
        } else {
          this.search();
        }
      },
      submitForm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.onSubmit();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      handleAvatarSuccess_content(res, file) {
        if (res.success) {
          this.$set(this.row, 'contentFile', res.data)
        }
      },
      beforeAvatarUpload_content(file) {
        const isLt2M = file.size / 1024 / 1024 < 2000;
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return isLt2M;
      },
      handleAvatarSuccess(res, file) {
        if (res.success) {
          this.$set(this.row, 'coverFile', res.data)
        }
      },
      beforeAvatarUpload(file) {
        // const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        // if (!isJPG) {
        //   this.$message.error('上传图片只能是 JPG 格式!');
        // }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return isLt2M;
      },
      onSubmit: function () {
        let param = this.row;
        let vm = this;
        let url = this.isAdd ? '/resourceInfoController/addResourceInfo' : '/resourceInfoController/updateResourceInfo';

        vm.$http.post(url, param).then(res => {
          if (!res.data.success) {
            vm.$message({
              showClose: true,
              message: res.data.msg,
              type: 'error'
            });
            return
          }
          vm.isChange = true;
          vm.$message({
            type: 'success',
            message: '保存成功!'
          })
          vm.hide()
        })
      }
    },
    name: "ResourceInfoEdit"
  }
</script>

<style scoped>

</style>

